<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import { isColor } from "../utils/utils";
    import type { BadgeRibbonProps } from "./BadgeRibbon";

    const props: BadgeRibbonProps = $props();
    const { align = "end", color, status, text, style, ...rest } = props;

    const classList = $derived(
        useClassList(props, "cm-badge-ribbon", {
            [`cm-badge-ribbon-status-${props.status}`]: !!props.status,
            [`cm-badge-ribbon-${align}`]: !!align,
            [`cm-badge-ribbon-trangle`]: props.trangle,
            [`cm-badge-ribbon-${props.color}`]: !!props.color && !isColor(props.color),
        })
    );
    const styles = $derived(
        useStyle(props, {
            "--cui-background-color": props.color && isColor(props.color) ? props.color : "",
            "--cui-ribbon-trangle-size": props.trangleSize ? `${props.trangleSize}px` : "",
            "--cui-ribbon-trangle-height": props.trangleHeight ? `${props.trangleHeight}px` : "",
        })
    );
</script>

<div {...rest} style={styles} class={classList}>
    {@render props.children?.()}
    <div class="cm-badge-ribbon-inner">
        <span class="cm-badge-ribbon-text">
            {#if typeof props.text === "function"}
                {@render props.text?.()}
            {:else}
                {props.text}
            {/if}
        </span>
        <div class="cm-badge-ribbon-corner"></div>
    </div>
</div>
